<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
   		<script src="./src/icreate.core.js"></script>
	    <script src="./src/icreate.dom.js"></script>
	    <script src="./src/icreate.event.js"></script>

        <script>
	    var datas = [
	        { name: 'jim1', age: 9, gender: '男' },
	        { name: 'jim2', age: 19, gender: '女' },
	        { name: 'jim3', age: 29, gender: '男' },
	        { name: 'jim4', age: 39, gender: '女' },
	        { name: 'jim5', age: 49, gender: '女' },
	        { name: 'jim6', age: 59, gender: '男' },
	        { name: 'jim7', age: 69, gender: '女' },
	    ];

	    I(function(){

	    	 I('<table width="400" border="1"><tbody>' + I.map(datas,function(item){	//项
	    		return'<tr>' + I.map( item, function(v,k)
	    		{
	    			return '<td>' + v +'</td>';
	    		}).join('')+ '</tr>';
	    	}).join('') +'</tbody></table>' ).appendTo('#container');

	    });

	   

	    //鼠标事件
	    I(function(){
		      I('#container tr').on('mouseover',function(){
		    	this.style.backgroundColor='grey';
		    }).mouseout(function() {
		    	this.style.backgroundColor='';
		    });

	    });
	    
	  


	    //鼠标以上以下两种颜色 事件
	    I(function(){

	 		I('#container >table >tbody >tr').mouseover(function(){
		    	I(this).prevAll().each(function(){
		    		this.style.backgroundColor='pink';
		    	}).end().nextAll().each(function(){
		    		this.style.backgroundColor='lightblue';
		    	});
		    }).mouseout(function(){
		    	I(this).prevAll().each(function(){
		    		this.style.backgroundColor='';
		    	}).end().nextAll().each(function(){
		    		this.style.backgroundColor='';
		    	});
		    })


	    });
	    
	    
	   


	

    </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>